<template>
    <div class="natural_readWord">
        <Header :isGoBack="false" style="background: rgba(38, 125, 255,0.8);">
            <!-- <Header :isGoBack="false" style="background:none;"> -->
            <template v-slot:right>
                <div class="btn" @click="$goRouter('naturalSpellCenter', $route.query)">返回学习中心</div>
            </template>
        </Header>
        <div class="natural_readWord_center">
            <div class="natural_readWord_content">
                <div class="title">
                    智能听音能写
                    <span class="feedback">反馈</span>
                    <span class="letter">b</span>
                </div>
                <div class="content">
                    <div class="tip">
                        点击
                        <img src="../../../assets/img/naturalSpell/play.png" alt="">
                        听读音
                    </div>
                    <ul class="topic">
                        <li class="topic_item" v-for="item of 3" :key="item">
                            <div class="top">
                                <img class="play" src="../../../assets/img/naturalSpell/play.png" alt="">
                                <el-input v-model="testInput" :placeholder="`b`"></el-input>
                                <img v-if="istrue" class="err" src="../../../assets/img/naturalSpell/err.png" alt="">
                                <img v-else class="err" src="../../../assets/img/naturalSpell/sucsess.png" alt="">
                            </div>
                            <div class="footer">
                                <span class="footer_item">bag [beeg]</span>
                                <span class="footer_item">背包，书包</span>
                            </div>
                        </li>
                    </ul>
                    <div class="btn">
                        <!-- <span class="confirm">确定</span> -->
                        <span class="next">下一题</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Header from "@/components/Header";
import { getDictationWordList } from "@/api/naturalSpell.js"
export default {
    name: 'EnglishWebIndex',
    components: {
        Header,
    },
    data() {
        return {
            istrue: true,
            testInput: "",
            btnFlag: true,
            playNumber: 2,
            nextBtnFlag: false
        };
    },

    mounted() {

    },

    methods: {
        // 获取单词
        async getDictationWordList(){
            await getDictationWordList()
        },
        noAgain() {
            this.btnFlag = false
        },
        subtractNumber() {
            this.playNumber -= 1
            if (this.playNumber <= 0) {
                this.nextBtnFlag = true
            }
        },
        nextTopic() {
            console.log("下一题");
        }

    },
};
</script>

<style lang="scss" scoped>
.natural_readWord {
    background: url("~@/assets/img/naturalSpell/read_word.png") no-repeat;
    // background: url("~@/assets/img/bg-home.jpg") no-repeat;
    background-position: center;

    .natural_readWord_center {
        .natural_readWord_content {
            margin: 30px auto 0;
            background: url("~@/assets/img/naturalSpell/write_word.png");
            background-size: 1035px 620px;
            width: 1035px;
            height: 620px;

            .title {
                // padding-top: 6px;
                position: relative;
                text-align: center;
                font-size: 32px;
                line-height: 66px;
                color: #FFFFFF;

                .feedback {
                    position: absolute;
                    right: 46px;
                    text-align: center;
                    font-size: 20px;
                    cursor: pointer;
                }

                .letter {
                    position: absolute;
                    top: 31px;
                    left: 185px;
                    line-height: 32px;
                    font-size: 32px;
                    font-weight: bold;
                    color: #FFFFFF;
                }
            }

            .content {
                margin: 19px 38px 0 45px;
                width: 954px;
                height: 487px;

                .tip {
                    padding: 54px 0 0 116px;

                    img {
                        width: 17px;
                        height: 14px;
                    }
                }

                .topic {
                    padding-left: 47px;
                    padding-top: 38px;

                    .topic_item {
                        .top {
                            display: flex;
                            align-items: center;

                            .play {
                                width: 42px;
                                height: 35px;
                                margin-right: 25px;
                            }

                            .err {
                                width: 34px;
                                height: 34px;
                            }

                            /deep/ .el-input {
                                width: 382px;
                                margin-right: 33px;
                            }

                            /deep/ .el-input__inner {
                                width: 382px;
                                height: 49px;
                                border: none;
                                border-radius: 0;
                                border-bottom: 1px solid #CCCCCC;
                                font-size: 34px;
                                font-weight: 400;
                                color: #111111;
                            }

                            /deep/input::-webkit-input-placeholder {
                                font-size: 34px;
                                font-weight: 400;
                                color: #111111;
                            }
                        }

                        .footer {
                            padding-left: 68px;
                            padding-top: 10px;
                            padding-bottom: 14px;

                            .footer_item {
                                margin-right: 10px;
                                display: inline-block;
                                padding: 0 5px;
                                height: 28px;
                                line-height: 28px;
                                font-size: 16px;
                                color: #111111;
                                font-weight: 400;
                                background: #EAEDF5;
                                border-radius: 3px;
                            }
                        }
                    }
                }

                .btn {
                    text-align: center;
                    span {
                        display: inline-block;
                        width: 155px;
                        height: 43px;
                        line-height: 43px;
                        text-align: center;
                        background: linear-gradient(0deg, #267DFF 0%, #4C48FF 100%);
                        border-radius: 9px;
                        color: #FFFFFF;
                        font-size: 12px;
                    }
                }

            }

        }
    }
}
</style>